<template>
	<view class="tabBox">
		<u-tabbar :placeholder="false" :value="current?current:0" @change="tabbarChange" :safeAreaInsetBottom="true" :border="false">
			<u-tabbar-item text="消息" :badge="tabbarBadge">
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/ulla/tabbar/msg_2.svg"></image>
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/ulla/tabbar/msg_1.svg"></image>
			</u-tabbar-item>
			<u-tabbar-item text="工作台">
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/ulla/tabbar/workbench_2.svg"></image>
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/ulla/tabbar/workbench_1.svg"></image>
			</u-tabbar-item>
			<u-tabbar-item text="通讯录">
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/ulla/tabbar/addressBook_2.svg"></image>
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/ulla/tabbar/addressBook_1.svg"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		options: { styleIsolation: 'shared' },
		data() {
			return {
				list: [
					{ path: '/pages/sys/msg/msg' },
					{ path: '/pages/sys/workbench/workbench' },
					{ path: '/pages/sys/addressBook/addressBook' },
				]
			}
		},
		props: {
			current: Number,
			tabbarBadge: Number,
		},
			components: {},
			onLoad() {
	 
			},
			onShow() {
	 
			},
		methods: {
			tabbarChange(e) {
				console.log(this.list[e].path);
				uni.switchTab({
					url: this.list[e].path
				})
			}
		}
	}
</script>

<style lang="scss">
.u-page__item__slot-icon {
	width: 50rpx;
	height: 50rpx;
}

.tabBox {
	
	::v-deep .u-tabbar__content__item-wrapper {
		height: 140rpx;
		
	}

	::v-deep .u-tabbar__content__item-wrapper .u-tabbar-item:nth-child(2) .u-page__item__slot-icon {
		width: 90rpx;
		height: 90rpx;
		padding: 20rpx;
	}
	
	::v-deep .u-tabbar__content__item-wrapper .u-tabbar-item:nth-child(2) {
		position: relative;
		bottom: 30rpx;
		background-color: #fff;
		border-radius: 100%;
		padding: 20rpx;
	}
}
</style>